<template>
  <div class="left_menu">
    <el-card class="box-card">
      <el-button-group class="btn_group">
        <el-button type="primary" class="btn_operate" @click="openModal">
          <i class="fa fa-plus" title="新建流程"></i>
        </el-button>
        <el-button type="primary" class="btn_operate" @click="choseMap('submit')">
          <i :class="[submitStatus?'fa fa-reply':'fa fa-vcard-o']" title="交接单"></i>
        </el-button>
        <el-button type="primary" class="btn_operate" @click="choseMap('map')">
          <i :class="[btnStatus?'fa fa-reply':'fa fa-map-o']" title="地图监控"></i>
        </el-button>
      </el-button-group>
      <div v-if="!btnStatus">
        <div class="left_aside">
          <span class="aside_title">今日</span>
        </div>
        <div class="text item" v-if="submitOrShow&&today">
          <el-radio v-model="radio" :label="today.flowId">{{today.flowAbstract}}</el-radio>
        </div>
        <div class="text item" v-else-if="!submitOrShow&&todaySubmit">
          <el-radio v-model="radio" :label="todaySubmit.id">{{todaySubmit.constructionContent}}</el-radio>
        </div>
        <span v-else-if="!todaySubmit&&!today" style="width: 100%;text-align: center;display: block">{{submitOrShow?'暂无流程':'暂无交接单'}}</span>
        <div class="left_aside">
          <span class="aside_title history_title">历史</span>
          <el-date-picker v-model="date" type="date" size="mini" class="history_date" @change="queryHistory" :picker-options="pickerOptions"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div v-for="item in history" :key="item.fid" v-if="submitOrShow&&history.length>0" class="text item">
          <el-radio-group v-model="radio">
            <el-radio :label="item.flowId">{{item.flowAbstract}}</el-radio>
          </el-radio-group>
        </div>
        <div v-for="item in historySubmit" :key="item.id" v-if="!submitOrShow&&historySubmit.length>0" class="text item">
          <el-radio-group v-model="radio">
            <el-radio :label="item.id">{{item.constructionContent}}{{historySubmit.length}}</el-radio>
          </el-radio-group>
        </div>
        <span v-else-if="(!submitOrShow&&historySubmit.length<=0)||(submitOrShow&&history.length<=0)" style="width: 100%;text-align: center;display: block">暂无历史</span>
      </div>
      <el-dialog :close-on-click-modal="false" title="新建流程" width="600px" :visible.sync="creatModal" @close="handelClose('creatForm')">
        <el-form ref="creatForm" :model="creatForm" :rules="creatRules" size="small" label-width="80px" class="demo-form-inline pro_item">
          <el-form-item label="流程描述" prop="desc">
            <el-input v-model.trim="creatForm.desc" placeholder="请输入流程描述" style="width: 100%">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handelClose('creatForm')">取 消</el-button>
          <el-button type="primary" @click="createNewOne">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import {
    construction
  } from "../../service/service_zbw";
  import {
    formCheck
  } from "../../lib/utils";
  import {
    mapState
  } from "vuex";
  export default {
    props: {
      refresh: {
        type: Boolean
      },
      projectId: {
        type: String
      }
    },
    data() {
      return {
        btnStatus: false,
        submitStatus: false,
        checked: true,
        radio: '0',
        date: '',
        submitOrShow: true,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 86400000;
          },
        },
        creatModal: false,
        creatForm: {
          desc: ''
        },
        creatRules: {
          desc: [{
              required: true,
              message: '请输入流程描述',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ]
        },
        today: {
          flowId: null,
          flowAbstract: ''
        },
        history: [],
        todaySubmit: {
          id: null,
          constructionContent: ''
        },
        historySubmit: [],
      }
    },
    computed: {
      ...mapState({
        //proJectId: state => state.proJectId
      })
    },
    methods: {
      queryHistory() {
        this.getTodayHistory();
        this.getTodayHistorySubmit();
      },
      /**
       * 页面切换相应
       */
      choseMap(status) {
        let obj = null;
        if (status === 'map') {
          this.submitStatus = false;
          this.btnStatus = !this.btnStatus;
          obj = {
            name: 'map',
            status: this.btnStatus
          };
          //this.submitOrShow = true;
        } else {
          this.btnStatus = false;
          this.submitStatus = !this.submitStatus;
          obj = {
            name: 'submit',
            status: this.submitStatus
          };
          this.submitOrShow = !this.submitOrShow;
        }
        this.$emit('chosens', obj);
      },
      /**
       * 获取流程
       */
      async getTodayHistory() {
        let param = {
          id: parseInt(this.projectId),
          queryDate: this.date === '' ? null : this.date
        };
        let res = await construction.getTodayHistory(param);
        if (res.success) {
          this.today = res.obj.todayInfo;
          this.history = res.obj.historyInfo;
        } else {

        }
        this.format();
      },
      async getTodayHistorySubmit() {
        let param = {
          id: parseInt(this.projectId),
          queryDate: this.date === '' ? null : this.date
        };
        let res = await construction.getTodayHistorySubmit(param);
        if (res.success) {
          this.todaySubmit = res.obj.todayInfo;
          this.historySubmit = res.obj.historyInfo;
        } else {

        }
        this.format();
      },
      /**
       * 打开模态框
       */
      async openModal() {
        if (!this.submitOrShow) {
          this.radio = null;
          return;
        }
        //查询当前用户是否有新增流程的权限
        let permissionRes = await this.checkAddPermission();
        if(permissionRes === false){
          return;
        }
        this.creatModal = true;
      },
      /**
       * 查询当前用户是否有新增流程的权限 
       */
      checkAddPermission: async function(){
        let res = await construction.checkAddPermission();
        if(res.success){
          //无权限
          if(res.obj === false){
            this.$message.error(res.msg);
            return false;
          }else{
            return true;
          }
          
        }else{
          return false;
          this.$message.error(res.msg);
        }
      },
      /**
       * 创建新的流程
       */
      async createNewOne() {
        let flag = formCheck(this, 'creatForm');
        let param = {
          projectId: this.projectId,
          flowAbstract: this.creatForm.desc
        };
        let res = await construction.createNewOne(param);
        if (res.success) {
          this.$emit('creatForm');
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.handelClose('creatForm');
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      },
      handelClose(name) {
        this.creatModal = false;
        this.$refs[name].resetFields();
      },
      // 整理当前选中
      format() {
        if (this.submitOrShow) {
          if (this.today && this.today.flowId) {
            this.radio = this.today.flowId;
          } else if (this.history.length > 0) {
            this.radio = this.history[0].flowId;
          } else {
            this.radio = null;
          }
        } else {
          if (this.todaySubmit && this.todaySubmit.id) {
            this.radio = this.todaySubmit.id;
          } else if (this.historySubmit.length > 0) {
            this.radio = this.historySubmit[0].id;
          } else {
            this.radio = null;
          }
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getTodayHistory();
        this.getTodayHistorySubmit();
      })
    },
    watch: {
      projectId(newval) {
        this.$nextTick(() => {
          this.submitOrShow = true;
          this.submitStatus = false;
          this.date = '';
          this.getTodayHistory();
          this.getTodayHistorySubmit();
        })
      },
      radio(newval) {
        this.$emit('flowIdBack', newval);
      },
      submitOrShow(newval) {
        this.format();
      },
      refresh(newval) {
        if (newval) {
          this.$nextTick(() => {
            this.getTodayHistory();
            this.getTodayHistorySubmit();
            this.$emit('refreshFinish');
          })
        }
      }
    }
  }

</script>

<style scoped>
  .left_menu {
    height: inherit;
    margin-right: 20px;
    overflow-y: auto!important;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 0 16px;
  }

  .box-card {
    width: inherit;
    height: inherit;
    overflow-y: auto;
  }

  .btn_group {
    width: 100%;
  }

  .btn_operate {
    width: 33.33%;
    height: 36px;
  }

  .icon {
    margin-right: 14px;
  }

  .left_aside {
    width: 100%;
    height: 36px;
    margin: 10px 0;
    background-color: #434A57;
    color: #fff;
  }


  .aside_title {
    text-align: left;
    height: 36px;
    line-height: 36px;
    padding-left: 20px;
  }

  .history_title {
    float: left;
  }

  .history_date {
    margin-top: 4px;
    float: right;
    width: 190px;
    margin-right: 5px;
  }

  .circle {
    width: 10px;
    height: 10px;
    border: 2px solid #000;
    border-radius: 10px;
  }

</style>

